<script setup lang='ts'>
import { useGetJcOrgDataSource } from '@fl/api/man-api'
import { SearchForm } from '@fl/components'
import { cloneDeep } from 'lodash-es'

const emit = defineEmits(['transfer'])

const treeData = computed(() => OrgDataSourceData.value ? cloneDeep(OrgDataSourceData.value) : [])

const tableRef = ref()

const visible = defineModel<boolean>('visible', { required: true })

const dialog = '选择组织'

const initialState = {
    zzZzqc: '',
}

const columns = [
    {
        label: '组织全称',
        prop: 'zzZzqc',
        renderField: (_, onChange) => {
            return h(ElInput, {
                onChange,
                onKeydown: (event: any) => {
                    if (event.key === 'Enter') {
                        event.preventDefault()
                    }
                },
            })
        },
        valueType: 'Input',
    },
]

const state = ref(cloneDeep(initialState))

const formRef = ref()

const { data: OrgDataSourceData, isLoading: OrgDataSourceLoading } = useGetJcOrgDataSource(state)

function cancel() {
    visible.value = false
}

function reset() {
    formRef.value.formInstance.handleReset()
}

function search(val: any) {
    state.value = cloneDeep(val)
}

function resetForm() {
    state.value = cloneDeep(initialState)
}

function selectValue(val: any) {
    emit('transfer', val)
    cancel()
}
</script>

<template>
    <PlusDialog v-model="visible"
                :title="dialog"
                width="1100"
                fullscreen
                :has-footer="false"
                @cancel="cancel"
                @closed="reset"
    >
        <SearchForm v-bind="state"
                    ref="formRef"
                    :columns="columns"
                    submit-text="查询"
                    class="mb-20"
                    @submit="search"
                    @reset="resetForm"
        />

        <vxe-table ref="tableRef"
                   :column-config="{ resizable: true }"
                   :tree-config="{ transform: true, rowField: 'ZZ_ZZBM', parentField: 'ZZ_SJZZ' }"
                   :data="treeData"
                   align="center"
                   show-overflow
                   border
                   height="900"
                   :loading="OrgDataSourceLoading"
                   :tooltip-config="{ zIndex: 9999 }"
        >
            <vxe-column field="ZZ_ZZQC"
                        title="组织全称"
                        align="left"
                        tree-node
                        width="200"
            />

            <vxe-column field="ZZ_ZZLB"
                        title="组织类别"
            />

            <vxe-column field="ZZ_XGR"
                        title="修改人"
            />

            <vxe-column field="ZZ_XGSJ"
                        title="修改时间"
            />

            <vxe-column field="ZZ_ZZZT"
                        title="组织状态"
            />

            <vxe-column title="操作"
                        width="250"
            >
                <template #default="{ row }">
                    <el-button text
                               :disabled="row?.syncStatus === 1"
                               @click="selectValue(row)"
                    >
                        {{ row?.syncStatus === 0 ? '选择' : '已同步' }}
                    </el-button>
                </template>
            </vxe-column>
        </vxe-table>
    </PlusDialog>
</template>
